<template>
  <div class="business-list-container">
    <!-- header部分 -->
    <header class="page-header">
      <p>商家列表</p>
    </header>

    <!-- 筛选和排序栏 -->
    <div class="filter-bar">
      <div class="filter-item active">
        <span>综合排序</span>
        <i class="fa fa-caret-down"></i>
      </div>
      <div class="filter-item">
        <span>距离最近</span>
      </div>
      <div class="filter-item">
        <span>销量最高</span>
      </div>
      <div class="filter-item">
        <i class="fa fa-filter"></i>
        <span>筛选</span>
      </div>
    </div>

    <!-- 商家列表部分 -->
    <div class="business-list-content">
      <div 
        v-for="business in businessList" 
        :key="business.id" 
        @click="goToBusinessInfo(business)"
        class="business-card"
      >
        <div class="business-image-container">
          <img :src="business.img" :alt="business.name" class="business-image">
          <div v-if="business.quantity" class="cart-badge">
            {{ business.quantity }}
          </div>
        </div>
        
        <div class="business-info">
          <div class="business-header">
            <h3 class="business-name">{{ business.name }}</h3>
            <div class="business-rating">
              <i class="fa fa-star"></i>
              <span>4.8</span>
            </div>
          </div>
          
          <div class="business-details">
            <div class="price-info">
              <span class="min-price">￥{{ business.minPrice }}起送</span>
              <span class="delivery-fee">配送费￥{{ business.deliveryFee }}</span>
            </div>
            <div class="delivery-time">约30分钟</div>
          </div>
          
          <div class="business-tags">
            <span class="tag">{{ business.description }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部安全间距 -->
    <div class="bottom-spacing"></div>

    <Footer />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Footer from '../components/Footer.vue'

export default defineComponent({
  name: 'BusinessList',
  components: {
    Footer
  },
  setup() {
    const router = useRouter()
    const route = useRoute()

    const businessList = ref([
      {
        id: 1,
        name: '万家饺子（驼峰街店）',
        img: new URL('@/assets/img/sj01.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '各种饺子炒菜',
        quantity: 3
      },
      {
        id: 2,
        name: '小锅饭豆腐馆（云南大学店）',
        img: new URL('@/assets/img/sj02.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '特色美食',
        quantity: 2
      },
      {
        id: 3,
        name: '麦当劳麦乐送（大学城地铁站店）',
        img: new URL('@/assets/img/sj03.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '汉堡薯条',
        quantity: 1
      },
      {
        id: 4,
        name: '米村拌饭（斗南花市店）',
        img: new URL('@/assets/img/sj04.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '各种炒菜拌饭'
      },
      {
        id: 5,
        name: '申记串道（景明南路店）',
        img: new URL('@/assets/img/sj05.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '烤串炸串'
      },
      {
        id: 6,
        name: '半亩良田排骨米饭',
        img: new URL('@/assets/img/sj06.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '排骨米饭套餐'
      },
      {
        id: 7,
        name: '茶兮鲜果饮品（春融东路店）',
        img: new URL('@/assets/img/sj07.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '甜品饮品'
      },
      {
        id: 8,
        name: '唯一水果捞（云南大学楸苑店）',
        img: new URL('@/assets/img/sj08.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '新鲜水果'
      },
      {
        id: 9,
        name: '满园春饼（实力锦城店）',
        img: new URL('@/assets/img/sj09.png', import.meta.url).href,
        minPrice: 15,
        deliveryFee: 3,
        description: '各种春饼'
      }
    ])

    const goToBusinessInfo = (business: any) => {
      router.push(`/business/${business.id}`)
    }

    return {
      businessList,
      goToBusinessInfo
    }
  }
})
</script>

<style scoped>
/* 总容器 */
.business-list-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 16vw;
}

/* 页面头部 */
.page-header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: white;
  font-size: 4.8vw;
  font-weight: 600;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  background: white;
  margin-top: 12vw;
  padding: 3vw 4vw;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 12vw;
  z-index: 100;
}

.filter-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.2vw;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;
}

.filter-item.active {
  color: #0097FF;
  font-weight: 600;
}

.filter-item i {
  margin-left: 1vw;
  font-size: 2.8vw;
}

.filter-item:last-child i {
  margin-right: 1vw;
  margin-left: 0;
}

/* 商家列表内容 */
.business-list-content {
  padding: 2vw 3vw;
}

/* 商家卡片 */
.business-card {
  background: white;
  margin-bottom: 3vw;
  border-radius: 3vw;
  padding: 4vw;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  cursor: pointer;
  transition: all 0.3s ease;
}

.business-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.business-card:last-child {
  margin-bottom: 0;
}

/* 商家图片容器 */
.business-image-container {
  position: relative;
  margin-right: 4vw;
  flex-shrink: 0;
}

.business-image {
  width: 16vw;
  height: 16vw;
  border-radius: 2vw;
  object-fit: cover;
}

.cart-badge {
  position: absolute;
  top: -2vw;
  right: -2vw;
  width: 5vw;
  height: 5vw;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5vw;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
}

/* 商家信息 */
.business-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.business-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2vw;
}

.business-name {
  font-size: 4.2vw;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  margin-right: 2vw;
}

.business-rating {
  display: flex;
  align-items: center;
  background: #fff3e0;
  padding: 1vw 2vw;
  border-radius: 3vw;
  flex-shrink: 0;
}

.business-rating i {
  color: #ffa726;
  font-size: 2.8vw;
  margin-right: 1vw;
}

.business-rating span {
  font-size: 3vw;
  color: #f57c00;
  font-weight: 600;
}

/* 商家详情 */
.business-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5vw;
}

.price-info {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.min-price {
  font-size: 3.2vw;
  color: #333;
  font-weight: 500;
}

.delivery-fee {
  font-size: 2.8vw;
  color: #666;
}

.delivery-time {
  font-size: 2.8vw;
  color: #999;
  background: #f5f5f5;
  padding: 1vw 2vw;
  border-radius: 2vw;
}

/* 商家标签 */
.business-tags {
  display: flex;
  gap: 2vw;
}

.tag {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  color: #5e35b1;
  font-size: 2.8vw;
  padding: 1.5vw 3vw;
  border-radius: 3vw;
  font-weight: 500;
}

/* 底部间距 */
.bottom-spacing {
  height: 16vw;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .business-name {
    font-size: 3.8vw;
  }
  
  .business-image {
    width: 15vw;
    height: 15vw;
  }
  
  .filter-item {
    font-size: 3vw;
  }
}
</style>